<template>
  <!-- 门锁-时效密码信息 -->
  <div class="door">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item label="区域:">
        <el-select
          v-model="defaultArea"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 140px"
          @change="selectArea"
        >
          <el-option label="全部类型" value></el-option>
          <el-option
            v-for="item in areaInfoList"
            :key="item.areaGuid"
            :label="item.areaName"
            :value="item.areaGuid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼栋:">
        <el-select
          v-model="defaultBuilding"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 120px"
        >
          <el-option label="全部类型" value></el-option>
          <el-option
            v-for="item in buildingInfoList"
            :key="item.buildingGuid"
            :label="item.buildingName"
            :value="item.buildingGuid"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="房间:">
        <el-input v-model="roomName" placeholder="名称" size="mini" clearable style="width: 110px"></el-input>
      </el-form-item>

      <el-form-item class="searchmarigin">
        <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="danger"
          @click="onDelete"
          size="mini"
          icon="el-icon-delete"
          v-if="isauth('auth_edit')"
        >取消密码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onExport" size="mini" icon="el-icon-document-copy">导出</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-popover width="550" placement="top" trigger="click">
          <el-row>
            <template v-for="item in Object.keys(formThead)">
              <el-checkbox
                :key="item"
                style="width: 20%"
                :label="formThead[item].label"
                v-model="formThead[item].checked"
                @change="checkboxChanged()"
              ></el-checkbox>
            </template>
          </el-row>
          <el-button
            slot="reference"
            size="mini"
            type="primary"
            icon="el-icon-edit-outline"
            >自定义</el-button
          >
        </el-popover>
      </el-form-item>-->
    </el-form>
    <!-- 房内人员信息显示 -->
    <div class="my_table">
      <el-table
        v-loading="loading"
        :data="detailslist"
        ref="table"
        border
        highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="(header) => headFirst(header, 2)"
        height="calc(100vh - 220px)"
        :cell-style="(res) => headFirst_col(res, [],2)"
      >
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column prop="roomName" label="房间" align="center" min-width="140px"></el-table-column>
        <el-table-column prop="terminalName" label="设备名称" align="center" min-width="120px"></el-table-column>
        <el-table-column prop="tempPassword" label="时效密码" align="center" min-width="90"></el-table-column>
        <!-- 有效时间 -->
        <el-table-column
          prop="startTime"
          label="有效开始日期"
          v-if="formThead.startTime.checked"
          align="center"
          min-width="150px"
        ></el-table-column>
        <!-- 有效时间 -->
        <el-table-column
          prop="endTime"
          label="有效结束日期"
          v-if="formThead.endTime.checked"
          align="center"
          min-width="150px"
        ></el-table-column>
        <!-- 开门-礼拜 -->
        <el-table-column prop="Sunday" label="星期" v-if="formThead.Sunday.checked" align="center">
          <el-table-column
            prop="monday"
            label="一"
            v-if="formThead.monday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox
                :model="scope.row.monday"
                :value="scope.row.monday == 1"
                @change="handleChange(scope.row, 'monday')"
                :disabled="true"
                style="padding: 0"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            prop="tuesday"
            label="二"
            v-if="formThead.tuesday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox
                :model="scope.row.tuesday"
                :value="scope.row.tuesday == 1"
                @change="handleChange(scope.row, 'tuesday', scope.$index)"
                :disabled="true"
              ></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column
            prop="wednesday"
            label="三"
            v-if="formThead.wednesday.checked"
            align="center"
            width="35px"
            :disabled="true"
          >
            <template slot-scope="scope">
              <el-checkbox
                :model="scope.row.wednesday"
                :value="scope.row.wednesday == 1"
                @change="handleChange(scope.row, 'wednesday')"
                :disabled="true"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            prop="thursday"
            label="四"
            v-if="formThead.thursday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox
                :model="scope.row.thursday"
                :value="scope.row.thursday == 1"
                @change="handleChange(scope.row, 'thursday')"
                :disabled="true"
              ></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column
            prop="friday"
            label="五"
            v-if="formThead.friday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox
                :model="scope.row.friday"
                :value="scope.row.friday == 1"
                @change="handleChange(scope.row, 'friday')"
                :disabled="true"
              ></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column
            prop="saturday"
            label="六"
            v-if="formThead.saturday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox
                :model="scope.row.saturday"
                :value="scope.row.saturday == 1"
                @change="handleChange(scope.row, 'saturday')"
                :disabled="true"
              ></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column
            prop="sunday"
            label="日"
            v-if="formThead.sunday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox
                :model="scope.row.sunday"
                :value="scope.row.sunday == 1"
                @change="handleChange(scope.row, 'sunday')"
                :disabled="true"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 星期时段 -->
        <el-table-column
          prop="SundayTime"
          label="星期时段"
          v-if="formThead.SundayTime.checked"
          align="center"
        >
          <el-table-column
            prop="mondayTimeStageIndex"
            label="一"
            v-if="formThead.mondayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
          <el-table-column
            prop="tuesdayTimeStageIndex"
            label="二"
            v-if="formThead.tuesdayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>

          <el-table-column
            prop="wednesdayTimeStageIndex"
            label="三"
            v-if="formThead.wednesdayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>

          <el-table-column
            prop="thursdayTimeStageIndex"
            label="四"
            v-if="formThead.thursdayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
          <el-table-column
            prop="fridayTimeStageIndex"
            label="五"
            v-if="formThead.fridayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
          <el-table-column
            prop="saturdayTimeStageIndex"
            label="六"
            v-if="formThead.saturdayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
          <el-table-column
            prop="sundayTimeStageIndex"
            label="日"
            v-if="formThead.sundayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
        </el-table-column>
        <!-- 假日时段 -->
        <el-table-column
          prop="holidayTimeStageIndex"
          label="假日时段"
          v-if="formThead.holidayTimeStageIndex.checked"
          align="center"
          width="40px"
        ></el-table-column>
        <el-table-column
          prop="backLock"
          label="反锁开门"
          v-if="formThead.backLock.checked"
          align="center"
          width="40px"
        >
          <template slot-scope="scope">
            <el-checkbox
              :model="scope.row.backLock"
              :value="scope.row.backLock == 1"
              @change="handleChange(scope.row, 'backLock')"
              :disabled="true"
            ></el-checkbox>
          </template>
        </el-table-column>

        <el-table-column prop="updateFlag" label="状态" align="center" min-width="100px">
          <template slot-scope="scope">
            <span>
              {{ scope.row.updateFlag | updateFlagType
              }}{{ scope.row.downloadState | downloadStateType }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20, 25]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import bus from '@/bus.js'
export default {
  data() {
    return {
      // 导出表格名称
      filename: '时效密码管理',
      elform: {},
      // 授权类型
      authType: '',

      // 默认选择的quyu
      defaultArea: '',
      // 区域列表
      areaInfoList: [],
      // 楼栋默认
      defaultBuilding: '',
      // 楼栋列表
      buildingInfoList: [],
      // 房间号信息
      roomName: '',

      loading: false,
      // 房内授权信息
      detailslist: [],
      // 选中数据
      chageList: [],
      pageNum: 1,
      pageSize: 20,
      currentPage: 1,
      recordCount: 0,
      searchInfo: {},
      // 授权信息表头
      formThead: {
        roomName: {
          label: '房间',
          prop: 'roomName',
          checked: true
        },
        terminalName: {
          label: '设备名称',
          prop: '时效密码',
          checked: true
        },
        tempPassword: {
          label: '设备名称',
          prop: 'tempPassword',
          checked: true
        },
        startTime: {
          label: '有效开始日期',
          prop: 'startTime',
          checked: true
        },
        endTime: {
          label: '有效结束日期',
          prop: 'endTime',
          checked: true
        },
        backLock: {
          label: '反锁开门',
          prop: 'backLock',
          checked: true
        },
        Sunday: {
          label: '星期',
          prop: 'backLock',
          checked: true
        },
        monday: {
          label: '星期一',
          prop: 'monday',
          checked: true
        },

        tuesday: {
          label: '星期二',
          prop: 'tuesday',
          checked: true
        },
        wednesday: {
          label: '星期三',
          prop: 'wednesday',
          checked: true
        },
        thursday: {
          label: '星期四',
          prop: 'thursday',
          checked: true
        },
        friday: {
          label: '星期五',
          prop: 'friday',
          checked: true
        },
        saturday: {
          label: '星期六',
          prop: 'saturday',
          checked: true
        },
        sunday: {
          label: '星期日',
          prop: 'sunday',
          checked: true
        },
        SundayTime: {
          label: '星期时段',
          prop: 'SundayTime',
          checked: true
        },
        mondayTimeStageIndex: {
          label: '星期一',
          prop: 'mondayTimeStageIndex',
          checked: true
        },
        tuesdayTimeStageIndex: {
          label: '星期二',
          prop: 'tuesdayTimeStageIndex',
          checked: true
        },
        wednesdayTimeStageIndex: {
          label: '星期三',
          prop: 'wednesdayTimeStageIndex',
          checked: true
        },
        thursdayTimeStageIndex: {
          label: '星期四',
          prop: 'thursdayTimeStageIndex',
          checked: true
        },
        fridayTimeStageIndex: {
          label: '星期五',
          prop: 'fridayTimeStageIndex',
          checked: true
        },
        saturdayTimeStageIndex: {
          label: '星期六',
          prop: 'saturdayTimeStageIndex',
          checked: true
        },
        sundayTimeStageIndex: {
          label: '星期七',
          prop: 'sundayTimeStageIndex',
          checked: true
        },
        holidayTimeStageIndex: {
          label: '假日时段',
          prop: 'holidayTimeStageIndex',
          checked: true
        },
        empowerType: {
          label: '授权状态',
          prop: 'empowerType',
          checked: true
        }
      }
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
    // 区域列表
    this.getAreaInfo()
  },
  filters: {
    updateFlagType(val) {
      val = Number(val)
      switch (val) {
        case 1:
          return '新增,'
          break
        case 2:
          return '覆盖,'
          break
        case 3:
          return '删除,'
          break
      }
    },
    downloadStateType(val) {
      val = Number(val)
      switch (val) {
        case 0:
          return '未下载'
          break
        case 1:
          return '下载成功'
          break
        case 2:
          return '设备名单已满'
          break
        case 5:
          return '名单内容有误'
          break
        case 6:
          return '找不到对应的设备'
          break
        case 7:
          return '名单已过期'
          break
      }
    }
  },
  mounted() {
    bus.$on('listenToA', this.getHeaderDate)
  },
  methods: {
    // 区域查询
    getAreaInfo() {
      this.$http({
        url: this.$http.adornUrl('/area/room/area-info-search'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.areaInfoList = data.messageContent
          console.log(data.messageContent)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 选择区域后触发
    selectArea() {
      console.log(this.defaultArea)
      this.defaultBuilding = ''
      // 获取对应区域内的楼栋信息
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-building'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            areaGuid: this.defaultArea
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.buildingInfoList = data.messageContent
          console.log(data.messageContent)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
      // this.getAreaInfo();
    },

    // 查询
    onSubmit() {
      let searchInfo = {}

      // 区域限定
      if (this.defaultArea != '') {
        searchInfo.areaGuid = this.defaultArea
      }
      // 楼栋限定
      if (this.defaultBuilding != '') {
        searchInfo.buildingGuid = this.defaultBuilding
      }

      // 房间限定
      if (this.roomName != '') {
        searchInfo.roomName = this.roomName
      }
      this.loading = true
      searchInfo.unitGuid = this.changeschoolid
      this.searchInfo = searchInfo
      this.pageNum = 1
      this.getLicense()
    },
    // 获取时效密码信息
    getLicense() {
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/doorLock/lock-date-time-password-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading = false
        console.log(data)
        if (data.messageCode == 200) {
          this.detailslist = data.messageContent.data
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          if (data.messageContent.data.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 导出数据需要用到的
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    // 导出
    onExport() {
      if (this.recordCount == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning'
        })
        return false
      }
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/doorLock/lock-date-time-password-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: 1,
            pageSize: this.recordCount,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.inExport(data.messageContent.data)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 导出
    inExport(detailslist) {
      detailslist.map(item => {
        item.updateFlag =
          this.$options.filters.updateFlagType(item.updateFlag) +
          this.$options.filters.downloadStateType(item.downloadState)
      })
      require.ensure([], () => {
        let multiHeader = [
          [
            '房间',
            '设备名称',
            '时效密码',
            '有效开始日期',
            '有效结束日期',
            '星期',
            '',
            '',
            '',
            '',
            '',
            '',
            '星期时段',
            '',
            '',
            '',
            '',
            '',
            '',
            '假日时段',
            '反锁开门',
            '状态'
          ]
        ]
        let merges = [
          'A1:A2',
          'B1:B2',
          'C1:C2',
          'D1:D2',
          'E1:E2',
          'F1:L1',
          'M1:S1',
          'T1:T2',
          'U1:U2',
          'V1:V2',
          'W1:W2'
        ]
        let tHeader = [
          '房间',
          '设备名称',
          '时效密码',
          '有效开始日期',
          '有效结束日期',
          '一',
          '二',
          '三',
          '四',
          '五',
          '六',
          '日',
          '一',
          '二',
          '三',
          '四',
          '五',
          '六',
          '日',
          '假日时段',
          '反锁开门',
          '状态'
        ]
        let filterValArr = [
          'roomName',
          'terminalName',
          'tempPassword',
          'startTime',
          'endTime',
          'monday',
          'tuesday',
          'wednesday',
          'thursday',
          'friday',
          'saturday',
          'sunday',
          'mondayTimeStageIndex',
          'tuesdayTimeStageIndex',
          'wednesdayTimeStageIndex',
          'thursdayTimeStageIndex',
          'fridayTimeStageIndex',
          'saturdayTimeStageIndex',
          'sundayTimeStageIndex',
          'holidayTimeStageIndex',
          'backLock',
          'updateFlag'
        ]
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const filterVal = filterValArr
        const list = detailslist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: this.filename + this.getimeto(),
          tableheader: '2'
        })
      })
    },
    // 选中数据
    handleSelectionChange(val) {
      console.log(val)
      this.chageList = val
    },
    // 删除选中数据，取消授权
    onDelete() {
      let namelistGuid = []
      this.chageList.map(item => {
        namelistGuid.push(item.namelistGuid)
      })
      if (namelistGuid.length == 0) {
        this.$message({
          message: '请勾选需要删除的数据',
          type: 'warning'
        })
        return false
      }
      this.$confirm('此操作将永久取消密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/terminal/doorLock/empower-name-delete'),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              namelistGuid: namelistGuid,
              unitGuid: this.changeschoolid,
              userGuid: this.userGuid
            },
            messageType: 0
          })
        })
          .then(({ data }) => {
            console.log(data)
            if (data.messageCode == 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.onSubmit()
            } else {
              this.$message.error(data.errorMessage)
            }
          })
          .catch(() => {})
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getLicense()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getLicense()
    },
    getHeaderDate(val) {
      this.formThead = val
    }
  }
}
</script>

<style lang="scss" scoped>
.door {
  padding: 10px;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .demo-form-inline,
  .demo-form-inline1 {
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 340px;
    }
  }
}
.page {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>